<script>
	$(document).ready(function(){
			$("#datepicker_from").datepicker({
				dateFormat: "yy-mm-dd",
			});
			$("#datepicker_to").datepicker({
				dateFormat: "yy-mm-dd",
			});
			 // $('#search_area').multipleSelect();

			//hiển thị hình ảnh khi click vào từng dòng kết quả
			$(document).on('click', '.result-table table tr', function(event) {
				event.preventDefault();
				//hiển thị đang chọn kết quả thứ bao nhiêu trên tổng số kết quả
				current_selected=$(this).find('td:first-child').text();
				total_result=$("#total_result").val().split("/").pop();
				$("#total_result").val(current_selected+"/"+total_result);
				//lấy thông tin hình ảnh
				host=$(this).find('.host').text();
				file=$(this).find('.file').text();
				date="20"+file.split("_")[0];
				year=date.substr(0,4);
				time=file.split("_")[1];
				hour=time.substr(0,2);
				minute=time.substr(2,2);
				first_image="http://"+host+"/"+year+"/"+date+"/"+hour+"/"+minute+"/"+file;
				image_pos=file.indexOf("_+");
				file=file.replaceAt(image_pos-1,"2");
				second_image="http://"+host+"/"+year+"/"+date+"/"+hour+"/"+minute+"/"+file;
				file=file.replaceAt(image_pos-1,"3");
				third_image="http://"+host+"/"+year+"/"+date+"/"+hour+"/"+minute+"/"+file;
				// $(".test").html(second_image);
				$(".image-active").attr('src', first_image);
				$(".image-wrapper ul li img").eq(0).attr({
					src: first_image,
					class: 'on-active'
				});
				$(".image-wrapper ul li img").eq(1).attr("src", second_image);
				$(".image-wrapper ul li img").eq(2).attr("src", third_image);
			});
			//hiển thị hình ảnh lớn khi chọn hình nhỏm đồng thời hình nào đang được chọn thì thêm class on-active
			$(".right-bar-bottom .image-wrapper ul li img").on('click', function(event) {
				event.preventDefault();
				$(".right-bar-bottom .image-wrapper ul li img").removeClass('on-active');
				$(this).addClass('on-active');
				$(".image-active").attr('src', $(this).attr('src'));

				// alert($(this).attr('src'));
			});
	})
	// thay đổi 1 ký tự tại vị trí cho trước của 1 chuỗi
	String.prototype.replaceAt=function(index, character) {
	    return this.substr(0, index) + character + this.substr(index+character.length);
	}
	function search(){
		search_area=$("#search_area").val();
		if($("#search_check_all").is(':checked'))
			check_all=1;
		else
			check_all=0;
		date_from=$("#datepicker_from").val();
		hour_from=$("#search_hour_from").val();
		minute_from=$("#search_minute_from").val();
		minute_to=$("#search_minute_to").val();
		hour_to=$("#search_hour_to").val();
		date_to=$("#datepicker_to").val();
		car_num=$("#search_car_num").val();
		regcognize=$(".regcognize-wrapper input[type=radio]:checked").val();
		car_type=$(".car-type-wrapper input[type=radio]:checked").val();
		if(!validate_date(date_from, hour_from, minute_from, date_to, hour_to, minute_to))
			return;
		//reset page khi tìm kiếm lại
		$(".result-page").val(1);
		$(".ajax-loader").fadeIn(300);
		$.ajax({
			url: '<?php echo base_url("index.php/home/show_result") ?>',
			type: 'POST',
			data: {
				search_area: search_area,
				check_all:check_all,
				date_from:date_from,
				hour_from:hour_from,
				minute_from:minute_from,
				minute_to:minute_to,
				hour_to:hour_to,
				date_to:date_to,
				car_num:car_num,
				regcognize:regcognize,
				car_type:car_type
				},
		})
		.done(function(data) {
			$(".ajax-loader").fadeOut('fast');
			data=JSON.parse(data);
			no=1;
			dom="";
			$("#total_result").val("0/"+data.total_result);
			$.each(data, function(index, val) {
				if(index!="total_result")
				{
					dom+="<tr>"+
							"<td>"+no+"</td>"+
							"<td>"+val.name+"</td>"+
							"<td>"+val.car_datetime+"</td>"+
							"<td>"+val.carnumber+
							"<span class='host'>"+val.host+"</span>"+
							"<span class='file'>"+val.filename+"</span>"+
							"</td>"+
						"</tr>";
					no++;
				}
			});
			$(".result-table tbody").html(dom);

		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});

	}
	function left_image()
	{
		$(".right-bar-bottom .image-wrapper ul li img.on-active").parent().prev().children('img').trigger('click');
	}
	function right_image()
	{
		$(".right-bar-bottom .image-wrapper ul li img.on-active").parent().next().children('img').trigger('click');
	}
	function page_next()
	{
		page=parseInt($(".result-page").val())+1;
		$(".result-page").val(page);
		search_area=$("#search_area").val();
		if($("#search_check_all").is(':checked'))
			check_all=1;
		else
			check_all=0;
		date_from=$("#datepicker_from").val();
		hour_from=$("#search_hour_from").val();
		minute_from=$("#search_minute_from").val();
		minute_to=$("#search_minute_to").val();
		hour_to=$("#search_hour_to").val();
		date_to=$("#datepicker_to").val();
		car_num=$("#search_car_num").val();
		regcognize=$(".regcognize-wrapper input[type=radio]:checked").val();
		car_type=$(".car-type-wrapper input[type=radio]:checked").val();
		$(".ajax-loader").fadeIn(300);
		$.ajax({
			url: '<?php echo base_url("index.php/home/show_result") ?>',
			type: 'POST',
			data: {
				page:page,
				search_area: search_area,
				check_all:check_all,
				date_from:date_from,
				hour_from:hour_from,
				minute_from:minute_from,
				minute_to:minute_to,
				hour_to:hour_to,
				date_to:date_to,
				car_num:car_num,
				regcognize:regcognize,
				car_type:car_type
				},
		})
		.done(function(data) {
			$(".ajax-loader").fadeOut('fast');
			data=JSON.parse(data);
			no=(page-1)*10+1;
			dom="";
			$.each(data, function(index, val) {
				dom+="<tr>"+
					"<td>"+no+"</td>"+
					"<td>"+val.name+"</td>"+
					"<td>"+val.car_datetime+"</td>"+
					"<td>"+val.carnumber+
					"<span class='host'>"+val.host+"</span>"+
					"<span class='file'>"+val.filename+"</span>"+
					"</td>"+
				"</tr>";
				no++;
			});
			$(".result-table tbody").html(dom);
		})
	}
	function page_prev()
	{
		page=parseInt($(".result-page").val())-1;
		if(page<1)
		{
			alert("This is the first page");
			page=1;
		}
		$(".result-page").val(page);
		search_area=$("#search_area").val();
		if($("#search_check_all").is(':checked'))
			check_all=1;
		else
			check_all=0;
		date_from=$("#datepicker_from").val();
		hour_from=$("#search_hour_from").val();
		minute_from=$("#search_minute_from").val();
		minute_to=$("#search_minute_to").val();
		hour_to=$("#search_hour_to").val();
		date_to=$("#datepicker_to").val();
		car_num=$("#search_car_num").val();
		regcognize=$(".regcognize-wrapper input[type=radio]:checked").val();
		car_type=$(".car-type-wrapper input[type=radio]:checked").val();
		$(".ajax-loader").fadeIn(300);
		$.ajax({
			url: '<?php echo base_url("index.php/home/show_result") ?>',
			type: 'POST',
			data: {
				page:page,
				search_area: search_area,
				check_all:check_all,
				date_from:date_from,
				hour_from:hour_from,
				minute_from:minute_from,
				minute_to:minute_to,
				hour_to:hour_to,
				date_to:date_to,
				car_num:car_num,
				regcognize:regcognize,
				car_type:car_type
				},
		})
		.done(function(data) {
			$(".ajax-loader").fadeOut("fast");
			data=JSON.parse(data);
			no=(page-1)*10+1;
			dom="";
			$.each(data, function(index, val) {
				dom+="<tr>"+
					"<td>"+no+"</td>"+
					"<td>"+val.name+"</td>"+
					"<td>"+val.car_datetime+"</td>"+
					"<td>"+val.carnumber+
					"<span class='host'>"+val.host+"</span>"+
					"<span class='file'>"+val.filename+"</span>"+
					"</td>"+
				"</tr>";
				no++;
			});
			$(".result-table tbody").html(dom);
		})
	}
	function validate_date(date_from, hour_from, minute_from, date_to, hour_to, minute_to)
	{
		format_from=date_from.split("-")[0]+"/"+date_from.split("-")[1]+"/"+date_from.split("-")[2]+" "+hour_from+":"+minute_from;
		//string to time
		from_to_time=Date.parse(format_from)/1000;
		format_to=date_to.split("-")[0]+"/"+date_to.split("-")[1]+"/"+date_to.split("-")[2]+" "+hour_to+":"+minute_to;
		//string to time
		to_to_time=Date.parse(format_to)/1000;
		if(to_to_time<=from_to_time)
		{
			alert("Wrong datetime");
			return 0;
		}
		else
			return 1;
		
	}
</script>